<template>
    <div>
        <div><h1>房间管理</h1></div>
        <div>
            <el-form
                :inline="true"
                :model="searchForm"
                class="demo-form-inline"
            >
                <el-form-item label="关键字">
                    <el-input
                        v-model="searchForm.keyWord"
                        placeholder="房间名称/房间号"
                        clearable
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary">搜索</el-button>
                    <el-button type="primary">添加房间</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="hotelList" stripe style="width: 100%">
                <el-table-column prop="hotelId" label="房间ID" width="100" />
                <el-table-column
                    prop="hotelName"
                    label="酒店名称"
                    width="180"
                />
                <el-table-column prop="address" label="房型名称" width="180" />
                <el-table-column prop="hotelName" label="房间名称" width="180" />
                <el-table-column
                    prop="hotelName"
                    label="房间号"
                    width="180"
                />
                
                <el-table-column prop="hotelName" label="时间" width="160" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="onKindList(scope.row)">
                            预定房间
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 20px;">
            <el-pagination
                v-model:current-page="searchForm.pageNum"
                v-model:page-size="searchForm.pageSize"
                :page-sizes="[100, 200, 300, 400]"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const hotelList = ref([
    {
        hotelId: 1,
        hotelName: "万达酒店",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        hotelId: 2,
        hotelName: "格林豪泰",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        hotelId: 3,
        hotelName: "国贸酒店",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        hotelId: 4,
        hotelName: "泰达酒单",
        address: "No. 189, Grove St, Los Angeles",
    },
]);
const searchForm = ref({
    pageNum: 1,
    pageSize: 10,
    keyWord: "",
});

const onKindList = (row) => {
    console.log(row);
};

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
};
</script>

<style scoped></style>
